<template>
    <div> 
        <section class="hot" v-for="item in list" :key="item.aid">
            <navigator url='../pages/Detail_Vido/index'>
           <img :src="item.pic" alt="">
           <div class="right">
               <p class="title">{{item.title}}</p>
               <span class="hundred">{{item.hot_desc}}</span>
               <p class="name"><span>up</span> {{item.author.name}}</p>
           </div>
           </navigator>
        </section>
    </div>
</template>

<script>

import {gethot} from '@/services'
import data from '../static/hot'
export default {
    data(){
        return{
            list:data.data,
        }
    },
    // created(){
    //     this.getlist()
    // },
    // methods: {
    //     async getlist(){
    //         let result=await gethot()
    //         console.log(result)
    //     }
    // },
}
</script>

<style lang="scss" scoped>
    .hot{
        display: flex;
        width: 100%;
        border-bottom:solid 1px #666;
        >img{
            width: 140px;
            height: 100px;
            border-radius: 20px;
            padding: 10px;
        }
        .right{
            padding: 10px 5px;
            flex-wrap: nowrap;
            flex-direction: column;
            width: 60%;
            .title{
                font-size: 13px;
            }
            .hundred{
                font-size: 10px;
                padding: 2px;
                color:#fff;
                background: #F9A05C;
                border-radius: 2px;
            }
            .name{
                span{
                    padding: 1px;
                    border-radius: 2px;
                    border:solid 1px #999999;
                    color:#999999;
                    font-size: 8px;
                    margin-right: 2px;
                }
                font-size: 13px;
                color:#999999;
            }
        }
    }
</style>
